﻿@import "variables";
@import "mixins";
@import "../fonts/icomoon/style.css";

@media (orientation: portrait){
    /* 竖屏 */
}
@media (orientation: landscape){
    /* 横屏 */
    html {
        -webkit-text-size-adjust: none;
    }
}
div,ul,article{
    -webkit-overflow-scrolling: touch;
}
html{
    height: 100%;
    overflow-x: hidden;
}
body{
    font-family: $font-family;
    color: $text-primary;
    min-height: 100%;
    background-color: #EEEEF3;
    word-wrap: break-word;
    word-break: break-all;
    overflow-x: hidden;
}
input, button, select, textarea{
    color: currentColor;
    font-family: $font-family;
}
textarea{
    resize: none;
}
.background{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 800px;
    margin: auto;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 1;
}
.viewport{
    width: 100%;
    height: 100%;
    max-width: 800px;
    //overflow-x: hidden;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.wrapper{
    width: 100%;
	max-width: 800px;
    min-height: 100%;
    top: 0;
    left: 0;
    right: 0;
	margin: auto;
    overflow-x: hidden;
    position: absolute;
    z-index: 9999;
    /*background-color: #F7F7F7;*/
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.wrapper[data-struct~="header"],
.wrapper[data-struct~="footer"]{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 3000;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.header, .footer{
    display: none;
}
[data-struct~="header"] .header{
    display: block;
}
[data-struct~="footer"] .footer{
    display: block;
}
.open-left-menu .wrapper{
    /*-webkit-transform: translate3d(85%,0,0) scale3d(0.9,0.9,0.9);
    transform: translate3d(85%,0,0) scale3d(0.9,0.9,0.9);*/
    -webkit-transform: translate3d(85%,0,0);
    transform: translate3d(85%,0,0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
}
.left-menu{
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    height: 100%;
    max-width: 600px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 2000;
    opacity: 0;
    /*-webkit-transform: translate3d(-100%,0,0) scale3d(0.9,0.9,0.9);
    transform: translate3d(-100%,0,0) scale3d(0.9,0.9,0.9);*/
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.open-left-menu .left-menu{
    opacity: 1;
    /*-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
    transform: translate3d(0,0,0) scale3d(1,1,1);*/
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
}
.left-menu .menu-header{
    height: 85px;
    box-sizing: border-box;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    position: relative;
    z-index: 1000;
//    background-color: #F7F7F7;
}
.left-menu .menu-footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 1000;
//    background-color: #F7F7F7;
}
.left-menu .container{
    overflow: auto;
}
.left-menu[data-struct] .container{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.left-menu[data-struct~="header"] .container{
    padding-top: 85px;
}
.left-menu[data-struct~="footer"] .container{
    padding-bottom: 50px;
}
.sub-title{
    color: #999;
    font-size: 14px;
    margin-top: 5px;
}
.wrapper[data-struct~="header"] .header, .wrapper[data-struct~="footer"] .footer{
    position: fixed;
    left: 0;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    z-index: 1000;
}
.wrapper[data-struct~="header"] .header-static{
    position: static;
    & + .container{
        height: auto;
        padding-top: 0;
    }
}
.wrapper .header{
    top: 0px;
}
.wrapper .footer{
    bottom: 0px;
}
.wrapper[data-struct] .container{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: inherit;
    -webkit-overflow-scrolling: touch;
}
.left-menu + .wrapper .container{
    width: 100%;
    /*position: absolute;*/
    box-sizing: border-box;
}
.wrapper[data-struct~="header"] .container{
    padding-top: 50px;
}
.wrapper[data-struct~="footer"] .container{
    padding-bottom: 50px;
}
.wrapper .header{
    & .left-button, & .right-button{
        height: 50px;
        line-height: 48px;
        /*padding: 0 20px;*/
        cursor: pointer;
        position: absolute;
    }
}
.wrapper .header .left-button > *, .wrapper .header .right-button > *{
    height: 50px;
//    line-height: 50px;
}
.wrapper .header{
    .icomoon{
        font-size: 20px;
    }
}
.wrapper .header .left-button{
    font-size: 18px;
    /*float: left;*/
    left: 0;
}
.wrapper .header .right-button{
    /*float: right;*/
    right: 0;
}
.wrapper .header .head-center{
    font-size: 18px;
    text-align: center;
    line-height: 50px;
    overflow: hidden;
}
.wrapper-shade{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: none;
}
.open-left-menu .wrapper .shade{
    z-index: 9998;
    display: block;
    opacity: 0;
    background-color: #fff;
}
.container{
    padding: 20px;
}
.container.nogap{
    padding: 0;
}
.gap-sm{
    padding: 20px 10px;
}
.container.ptb{
    padding: 20px 0;
}
.container.plr{
    padding: 0 20px;
}
.disabled-wechat-slide:before,
.disabled-wechat-slide:after{
    content: "";
    height: 1px;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}
a, a:link:visited:hover:active{
    color: #06A0EA;
}
a.text{
    color: currentColor;
}
.gray, a.gray{
    color: $text-gray;
}
.btn{
    /*color: #fff;*/
    font-family: $font-family;
    width: 100%;
    height: 40px;
    line-height: 39px;  /*上下border加起来2px*/
    font-size: 16px;
    /*display: block;*/
    vertical-align: middle;
    padding: 0 15px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid transparent;
}
button.disabled, .btn:disabled{
    color: #777;
    cursor: not-allowed;
    background-color: #aaa;
}
.btn-sm{
    width: auto;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}
.btn-xs{
    width: auto;
    height: 30px;
    line-height: 29px;
}
.btn-mini{
    font: 13.3333px Arial;
    /*color: #fff;*/
    width: auto;
    height: auto;
    line-height: normal;
    padding: 1px 6px;
    border-radius: 0;
    border-width: 2px;
    border-style: solid;
}
.btn.btn-unstyled{
    color: currentColor;
    width: auto;
    height: inherit;
    /*line-height: inherit;*/
    background-color: transparent;
}
.btn-default{
    color: currentColor;
    border: 1px solid #ccc;
    background-color: #fff;
}
.btn.btn-dropdown{

}
.btn.btn-dropdown:not(.nocaret):after{
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    @include caret("top", 4px);
}
.btn-group{
    display: inline-block;
    //vertical-align: middle;
    position: relative;
}
.btn-group .dropdown{
    min-width: 100%;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 999;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: none;
    background-color: #FFF;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}
.btn-group .dropdown.scroll{
    max-height: 300px;
    overflow-y: auto;
}
.dropdown.arrow{
    &:before, &:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        @include caret("bottom", 8px);
    }
    &:before{
        color: $border-color;
        top: -8px;
        left: 17px;
        z-index: 1;
    }
    &:after{
        color: $bg-primary;
        top: -7px;
        left: 17px;
        z-index: 2;
    }
}
.btn-group[align='top'] .dropdown.arrow{
    &:before, &:after{
        -webkit-transform: rotate3d(0, 0, 1, 180deg);
        -ms-transform: rotate3d(0, 0, 1, 180deg);
        transform: rotate3d(0, 0, 1, 180deg);
    }
    &:before{
        top: auto;
        bottom: -8px;
        left: 17px;
    }
    &:after{
        top: auto;
        bottom: -7px;
        left: 17px;
    }
}

.btn-group.open .dropdown{
    display: block;
}
.btn-group[align='left'] .dropdown{
    left: 0;
}
.btn-group[align='right'] .dropdown{
    right: 0;
}
.btn-group[align='center'] .dropdown{
    left: 0;
    right: 0;
    margin: auto;
}
.btn-group[align='top'] .dropdown{
    top: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
[align="left"] .dropdown.arrow{
    &:before, &:after{
        left: 17px;
        right: auto;
    }
}
[align="right"] .dropdown.arrow{
    &:before, &:after{
        left: auto;
        right: 17px;
    }
}
.caret{
    &:after{
        content: '';
        height: 0;
        line-height: 0;
        color: $text-primary;
        @include caret("top", 4px);
        display: inline-block;
        vertical-align: middle;
    }
}

.btn-switch>*:last-child, .btn-switch.active>*:first-child{
    display: none;
}
.btn-switch.active>*:last-child{
    display: inherit;
}
.dropdown > li:hover{
    background-color: #ddd;
}
.dropdown > li > a{
    white-space: nowrap;
}
.list.dropdown > li{
    border: none;
    height: inherit;
    line-height: normal;
    white-space: nowrap;
}
/*.radio, .checkbox{
    display: inline-block;
    position: relative;
}
.radio .cbo-icon, .checkbox .cbo-icon{
    background-color: #fff;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 2px;
}
.radio .cbo-text, .checkbox .cbo-text{
    padding-left: 20px;
    display: inline-block;
    vertical-align: middle;
}
.checkbox input:checked + .cbo-icon:after{
    content: "";
    width: 30%;
    height: 60%;
    top: 7%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    border-right: 2px solid #06A0EA;
    border-bottom: 2px solid #06A0EA;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}
.radio .cbo-icon{
    width: 18px;
    height: 18px;
    padding: 3px;
    border-radius: 100%;
    box-sizing: border-box;
}
.radio input:checked+.cbo-icon:after{
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    border-radius: 100%;
    background-color: #06A0EA;
}
.radio input[type="radio"], .checkbox input[type="checkbox"]{
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
}*/


label{
    //icon大小
    $icon-size: 14px;
    &.checkbox, &.radio{
        position: relative;
        display: inline-block;
        vertical-align: middle;
        background-color: rgba(0,0,0,0);
        & + &{
            margin-left: 10px;
        }
        &:after{
            @include clearfix;
        }
        label{
            position: relative;
            z-index: -1;
            display: block;
            overflow: hidden;
        }
        input{
            display: none;
            & + label{
                top: 1px;
                width: $icon-size + 4;
                height: $icon-size + 4;
                float: left;
                margin-right: 5px;
                font-size: $icon-size;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                border: 1px solid $border-color;
                background-color: $bg-primary;
            }
            & + label:before{
                content: '';
                color: currentColor;
                width: $icon-size;
                height: $icon-size;
                @include absolute-center;
            }
        }
    }
    &.checkbox input:checked + label{
        @extend .icomoon;
        @extend .icon-right;
    }
    &.radio input + label{
        border-radius: 100%;
    }
    &.radio input:checked + label:before{
        content: '';
        width: $icon-size - 4;
        height: $icon-size - 4;
        border-radius: 100%;
        background-color: currentColor;
        @include absolute-center;
    }
}

.switch{
    color: rgb(66,208,90);
    width: 50px;
    height: 30px;
    font-size: 0;
    text-align: right !important;
    border: 1.5px solid currentColor;
    display: inline-block;
    vertical-align: middle;
    border-radius: 1000px;
    box-sizing: border-box;
    background-color: currentColor;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch:after{
    content: "";
    width: 28px;
    height: 100%;
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    border-radius: 100%;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0 3px 2px rgba(100,100,100,0.3);
}
.switch.off{
    text-align: left !important;
    border: 1.5px solid #ddd;
    background-color: #fff;
}
.switch.off:after{
    margin-left: -0.5px;
    border: 0.5px solid #ddd;
}
/*.modal-container.modal-lg .modal-content{
    min-width: 200px;
}
.modal-wrapper .modal-content{
    text-align: center;
    background-color: #fff;
}*/
.symbol.modal-wrapper{
    max-width: 800px;
}
.symbol .modal-content{
    min-width: 200px;
    padding-top: 50px;
}
.symbol .modal-head{
    width: 80px;
    height: 80px;
    top: -40px;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 100%;
    position: absolute;
    box-sizing: border-box;
    border: 5px solid #fff;
    background-color: #06A0EA;
}
.symbol .modal-head img{
    position: absolute;
    width: 60%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
input, select, textarea{
    width: 100%;
    height: 40px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 0;
    background-color: #fff;
    -webkit-appearance: none !important;
    appearance: none !important;
}
textarea{
    height: 120px;
    line-height: normal;
    padding: 6px 8px;
    margin-bottom: 10px;
    display: block;
}
input.txt-sm{
    width: auto;
}
.txt-icon-left{
    background-repeat: no-repeat;
    background-size: auto 50%;
    padding-left: 40px;
    background-position: 15px center;
}
.txt-icon-right{
    position: relative;
}
.txt-icon-right > input{
    padding-right: 40px;
}
.txt-icon-right > i{
    position: absolute;
    width: 21px;
    height: 21px;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}
.tabs-scrollbar{
    width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    //position: relative;
}
/*.tabs-scrollbar:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    z-index: 0;
    background-color: $border-color;
}*/
.tabs::-webkit-scrollbar ,.tabs-scrollbar::-webkit-scrollbar{
    display: none;
}
.tabs{
    width: 100%;
    box-sizing: border-box;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    text-align: justify;
    vertical-align: middle;
    //background-color: inherit;
    //position: relative;
    //overflow-x: auto;
    //border-bottom: 1px solid #ccc;
    /*display: -webkit-flex;
    display: flex;*/
}
.nav-tabs{
    position: relative;
    z-index: 1;
}
.nav-tabs:before, .nav-tabs:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    z-index: -1;
    background-color: $border-color;
}
.nav-tabs:before{
    top: 0;
    bottom: auto;
    background-color: $border-color;
}
.tabs > li{
    padding: 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
}
.tabs > li{
    & > a{
        color: $text-primary;
        padding-left: 15px;
        padding-right: 15px;
        display: block;
    }
    &.active > a{
        color: $color-primary;
    }
}
.tabs > li.active:after{
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    width: 100%;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    border-bottom: 1px solid currentColor;
}
.tabs.two > li{
    width: 50%;
    min-width: 50%;
}
.tabs.three > li{
    width: 33%;
    min-width: 33%;
}
.tabs.three > li:nth-child(2){
    width: 34%;
    min-width: 34%;
}
.tabs.four > li{
    width: 25%;
    min-width: 25%;
}
.tabs.five > li{
    width: 20%;
    min-width: 20%;
}
.tab-target{
    display: none;
    background-color: #fff;
}
.tab-targets > *{
    display: none;
    /*background-color: #fff;*/
}
.gotop {
    position: fixed;
    width: 35px;
    height: 35px;
    right: 5px;
    bottom: 5px;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}
.gotop:after {
    content: "";
    width: 40%;
    height: 40%;
    top: 40%;
    margin: auto;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    position: relative;
    display: block;
}
.list{
    //margin: 0;
    //padding: 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    /*background-color: #F7F7F7;*/
}
.list.nbg{
    background-color: transparent;
}
.list > li{
    //min-height: 40px;
    padding: 10px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
}
ol.list > li{
    padding-left: 0;
}
.list > li > a{
    color: currentColor;
}
.list > li:first-child{
    border-top: 1px solid #ccc;
}
.list-unstyled{
    margin: 0;
    padding: 0;
    border: none;
    & > li{
        border: none;
        padding-left: 0;
        padding-right: 0;
    }
}
.tab-targets > .list, .list.tab-target{
    margin-top: -1px;
}
.list.nbt{
    border-top: none;
}
.nogap > li, .no-gap > li{
    padding-left: 0;
    padding-right: 0;
}
.no-gap > li{
    padding: 0;
}
.list > li:first-child,
.gap > li:first-child,
.gap-left > li:first-child,
.gap-right > li:first-child{
    border-top: none;
}
.list > li:last-child,
.gap > li:last-child,
.gap-left > li:last-child,
.gap-right > li:last-child{
    border-bottom: none;
}
.gap > li{
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 0;
    padding-right: 0;
}
.gap-left > li{
    margin-left: 15px;
    padding-left: 0;
}
.gap-right > li{
    margin-right: 15px;
    padding-right: 0;
}
.arrow > li{
    position: relative;
    padding-right: 30px;
}
.arrow > li .icon-arrow{
    color: currentColor;
    height: 40px;
    line-height: 40px;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    position: absolute;
    display: block;
}
.link > li{
    padding: 0;
}
.link > li > a{
    padding: 10px 15px;
    display: block;
}
.nogap > li > a{
    padding-left: 0;
    padding-right: 0;
}
/*.list > li > .left{
    float: left;
    margin-right: 5px;
}
.list > li > .right{
    overflow: hidden;
    text-align: right;
}*/
.btn-group.shopping-cart{
    color: currentColor;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    display: inline-block;
}
.btn-group.shopping-cart input[type="number"]{
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    min-height: 0;
    border: none;
    visibility: hidden;
    position: absolute;
}
.btn-group.shopping-cart .icon-add,
.btn-group.shopping-cart .icon-sub,
.btn-group.shopping-cart .count,
.btn-group.shopping-cart input.count{
    height: 30px;
    min-width: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0 5px;
    min-height: 0;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    border: 1px solid #ccc;
    position: relative;
}
.btn-group.shopping-cart .count{
    background-color: #fff;
}
.btn-group.shopping-cart input.count{
    width: 30px;
}
.btn-group.shopping-cart .icon-add{
    margin-left: -1px;
}
.btn-group.shopping-cart .icon-sub{
    margin-right: -1px;
}
.btn-group.shopping-cart input[value="0"] + .icon-sub,
.btn-group.shopping-cart input:not([value]) + .icon-sub,
.btn-group.shopping-cart input[value="0"] + .icon-sub + .count,
.btn-group.shopping-cart input:not([value]) + .icon-sub + .count{
    display: none;
}
.nav.tabs{
    height: 40px;
    border: none;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.nav.tabs > li{
    line-height: normal;
}
.nav.tabs > li.active:after{
    content: "";
    height: 0;
    display: none;
}
.nav.tabs > li > .tab-icon{
    font-size: 25px;
}
.nav.tabs > li > .tab-icon > *,
.nav.tabs > li.active > .tab-icon > *:first-child{
    display: none;
}
.nav.tabs > li > .tab-icon > *:first-child,
.nav.tabs > li.active > .tab-icon > *:last-child{
    display: inherit;
}
.nav.tabs > li > .tab-text{
    -webkit-text-size-adjust: none;
    font-size: 10px;
    margin-top: 3px;
}
* .align-left:first-child{
    float: left;
    margin-right: 5px;
}
* .align-left:first-child + .align-right, * .align-right:last-child{
    overflow: hidden;
    text-align: right;
}
* .align-right:first-child{
    float: right;
    margin-left: 5px;
}
* .align-right:first-child + .align-left, * .align-left:last-child{
    overflow: hidden;
}
.btn-group.merge .align-left input{
    padding-right: 0;
    border-right: none;
}
.btn-group.merge .align-right{
    margin-left: 0;
}
.merge .align-left:first-child{
    margin-right: 0;
}

/*-------- iOS Loading CSS3 --------*/
.loading.animate{
    -webkit-animation: rotating 0.8s steps(12) infinite;
    -ms-animation: rotating 0.8s steps(12) infinite;
    animation: rotating 0.8s steps(12) infinite;
}
.loading-wrap{
    padding: 15px;
    border-radius: 8px;
    background-color: rgba(0,0,0,0.5);
}
.loading-box{
    width: 37px;
    height: 37px;
    font-size: 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.loading-block{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.loading-block:before, .loading-block:after{
    content: "";
    width: 3px;
    height: 9px;
    background-color: currentColor;
    position: absolute;
    border-radius: 6px;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.loading-block:before{
    top: 1px;
}
.loading-block:after{
    bottom: 1px;
}
.loading-block:nth-child(2){
    -webkit-transform: rotate3d(0,0,1,30deg);
    -ms-transform: rotate3d(0,0,1,30deg);
    transform: rotate3d(0,0,1,30deg);
}
.loading-block:nth-child(3){
    -webkit-transform: rotate3d(0,0,1,60deg);
    -ms-transform: rotate3d(0,0,1,60deg);
    transform: rotate3d(0,0,1,60deg);
}
.loading-block:nth-child(4){
    -webkit-transform: rotate3d(0,0,1,90deg);
    -ms-transform: rotate3d(0,0,1,90deg);
    transform: rotate3d(0,0,1,90deg);
}
.loading-block:nth-child(5){
    -webkit-transform: rotate3d(0,0,1,120deg);
    -ms-transform: rotate3d(0,0,1,120deg);
    transform: rotate3d(0,0,1,120deg);
}
.loading-block:nth-child(6){
    -webkit-transform: rotate3d(0,0,1,150deg);
    -ms-transform: rotate3d(0,0,1,150deg);
    transform: rotate3d(0,0,1,150deg);
}
.loading-block:nth-child(1):before{
    opacity: 0.9;
}
.loading-block:nth-child(2):before{
    opacity: 0.1;
}
.loading-block:nth-child(3):before{
    opacity: 0.1;
}
.loading-block:nth-child(4):before{
    opacity: 0.1;
}
.loading-block:nth-child(5):before{
    opacity: 0.1;
}
.loading-block:nth-child(6):before{
    opacity: 0.2;
}
.loading-block:nth-child(1):after{
    opacity: 0.3;
}
.loading-block:nth-child(2):after{
    opacity: 0.4;
}
.loading-block:nth-child(3):after{
    opacity: 0.5;
}
.loading-block:nth-child(4):after{
    opacity: 0.6;
}
.loading-block:nth-child(5):after{
    opacity: 0.7;
}
.loading-block:nth-child(6):after{
    opacity: 0.8;
}

/*-------- Pull Refresh --------*/
.pull-box{
    height: 0;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.pull-box > .pull-item{
    line-height: 50px;
}
.pull-box.loading{
    height: auto;
    top: 0;
}
.pull-box.easing{
    margin-top: -50px;
    -webkit-transition: margin-top 0.4s ease;
    transition: margin-top 0.4s ease;
}
.pull-box .pull-text{
    display: block;
}
.pull-item{
    display: none;
}
.pull-loading .pull-box .pull-text{
    display: none;
}
.pull-loading .pull-box .pull-icon{
    display: inline-block;
}

/*-------- iconfont --------*/
.icon-plus:before, .icon-minus:before{
    -webkit-text-stroke-width: 0.8px;
}
.icon-loading{
    font-size: 35px;
    display: inline-block;
    vertical-align: middle;
}

/*-------- Loading --------*/
.loading-img{
    
}
.loading-animate {
    -webkit-animation: rotating 0.8s steps(12) infinite;
    -ms-animation: rotating 0.8s steps(12) infinite;
    animation: rotating 0.8s steps(12) infinite;
}
.icon-loading.loading-animate {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: rotating 0.8s steps(19) infinite;
    -ms-animation: rotating 0.8s steps(19) infinite;
    animation: rotating 0.8s steps(19) infinite;
}
@-webkit-keyframes rotating {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}
@keyframes rotating {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform:  rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        -ms-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

/*-------- Swiper --------*/
.swiper-pagination{
    -webkit-transition: none;
    transition: none;
}

/*-------- Emotion --------*/
.component-emoticon .btn-emoticon{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 3px;
}
.component-emoticon .btn-emoticon .icomoon{
    font-size: 22px;
}
.list-emoticon{
    height: 0;
    overflow: hidden;
}
.open-emoticon .list-emoticon{
    width: 100%;
    height: auto;
    padding: 10px 0;
    overflow: inherit;
    display: block;
}
.em{
    vertical-align: bottom;
}

/*-------- mobile no scroll --------*/
html.noscroll{
    height: 100% !important;
    overflow: hidden;
}
html.noscroll body{
    height: 100% !important;
    overflow: hidden;
}
html.noscroll body [role="main"]{
    height: 100% !important;
    overflow: hidden;
}
.no-bg{
    background: none !important;
}
.no-border{
    &, &.list > li{
        border: none !important;
    }
}


.btn .icomoon{
    vertical-align: middle;
}


.list-inline{
    margin-left: -10px;
    margin-right: -10px;
    display: inline-block;
    vertical-align: middle;
}
.list-inline > li{
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}
.list-inline > li:after{
    @include clearfix;
}
.list-inline > li > *{
    vertical-align: middle;
}


.list-cover{
    & > li:after{
        clear: both;
        content: " ";
        display: block;
        height: 0;
        line-height: 0;
        overflow: hidden;
        visibility: hidden;
    }
    & > li > *:first-child{
        margin-right: 10px;
    }
    .cover{
        width: 100px;
        height: 75px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .info{
        text-align: left;
    }
    .info .secondary{
        color: $text-gray-light;
        font-size: 85%;
    }
    .info > p{
        margin-top: 0;
        margin-bottom: 7px;
    }
    .info > p:last-child{
        margin-bottom: 0;
    }
}
.list-thumb{
    @extend .list-cover;
}

.list-scrollbar{
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    border-top: 1px solid $border-color;
}
.list-scrollbar .list{
    margin-top: -1px;
}


.list-appraise{
    color: $gold;
    font-size: 16px;
    margin-left: -2.5px;
    display: inline-block;
    vertical-align: text-top;
}
.list-appraise > li{
    @extend .icomoon;
    @extend .icon-star;
    float: left;
    padding-left: 2.5px;
    padding-right: 2.5px;
}
.list-appraise:not(.disabled) > li{
    cursor: pointer;
}
.list-appraise > li.selected{
    @extend .icon-star-fill;
}


/*-------- form list --------*/
.list-form > li > .align-right{
    & > *, & > * input{
        border: none;
        height: auto;
        padding: 0;
        text-align: right;
        background-color: transparent;
    }
    & select{
        width: auto;
        height: 100%;
        line-height: 1;
        padding: 10px 0 0 20px;
        margin: -10px 0 0 -20px;
        display: inline-block;
    }
}
.list-form .btn-unstyled{
    font-size: 16px;
    height: auto;
    line-height: 1.42857143;
    padding: 0;
    border: none;
    vertical-align: middle;
}
.list-form [data-overflow="visible"]{
    overflow: visible !important;
}
.list-form [data-control="dropdown"]{
    //margin-top: -2px;
    overflow: visible !important;
}
.list-form [data-control="dropdown"] .dropdown{
    text-align: center;
}


.list-checkbox{
    position: relative;
    z-index: 1;
}


.tabs-inline{
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    font-size: 0;
    white-space: nowrap;
}
.tabs-inline::-webkit-scrollbar{
    display: none;
}
.tabs-inline > li{
    font-size: 16px;
    display: inline-block;
}
.tabs-inline > li > a{
    height: 40px;
    line-height: 40px;
    display: inline-block;
}


.expand{
    margin-bottom: 10px;
}
.expand-wrapper{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.expand.active .expand-wrapper{
    white-space: normal;
}
.btn-expand{
    margin-top: -10px;
    padding: 5px;
    text-align: center;
    display: block;
}
.btn-expand .icon-arrow{
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: rotate3d(0,0,1,90deg);
    transform: rotate3d(0,0,1,90deg);
}
.expand.active .btn-expand .icon-arrow{
    -webkit-transform: rotate3d(0,0,1,-90deg);
    transform: rotate3d(0,0,1,-90deg);
}


.progress{
    position: relative;
    .title{
        position: absolute;
        top: 0;
        left: 0;
    }
    .info{
        position: absolute;
        top: 0;
        right: 0;
    }
}
.progress-bar{
    height: 13px;
    border: 1px solid #ccc;
    border-radius: 1000px;
    box-shadow: 0 1px 1px #ccc inset;
    position: relative;
}
.progress-bar .progress-fill{
    position: absolute;
    height: 100%;
    border-radius: 1000px;
    background-color: #1f6ed1;
    background: -webkit-linear-gradient(left, #4793fa, #1f6ed1);
    background: linear-gradient(left, #4793fa, #1f6ed1);
}
.progress-bar.vertical{
    width: 13px;
    height: 300px;
    position: relative;
    box-shadow: 0 1px 1px #ccc inset;
}
.progress-bar.vertical .progress-fill{
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    background: -webkit-linear-gradient(top, #4793fa, #1f6ed1);
    background: linear-gradient(top, #4793fa, #1f6ed1);
}
.progress.progress-danger .progress-fill{
    background: #FA5856;
}


/*-------- corner --------*/
.list-corner > li{
    overflow: hidden;
    position: relative;
}
.list-corner > li.disabled{
    background-color: rgba(200,200,200,0.3);
    & > *{
        color: $text-gray-light;
    }
}
.corner-box .info .title{
    padding-right: 35px;
}
.corner{
    width: 90px;
    height: 90px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    background-color: #ccc;
    -webkit-transform: rotate3d(0,0,1,45deg) translate3d(0,-72%,0);
    transform: rotate3d(0,0,1,45deg) translate3d(0,-72%,0);
}
.corner-wrapper{
    position: absolute;
    text-align: center;
    bottom: 5px;
    left: 10px;
    right: 0;
    margin: auto;
    box-sizing: border-box;
    padding: 2px;
    -webkit-transform: rotate3d(0,0,1,-45deg);
    transform: rotate3d(0,0,1,-45deg);
}
.corner .icomoon{
    color: #fff;
    font-size: 20px;
    vertical-align: bottom;
}
.corner-text{
    left: 4px;
    bottom: 0;
    -webkit-transform: none;
    transform: none;
}
.corner-default{
    background-color: #ccc;
}
.corner-primary {
    color: #fff;
    background-color: #00ADEF;
}
.corner-success {
    color: #fff;
    background-color: #8AC249;
}
.corner-warning{
    color: #fff;
    background-color: #f0ad4e;
}
.corner-danger{
    color: #fff;
    background-color: #FD5757;
}


/*-------- 表格 --------*/
table, tbody{
    border: none;
}
.table{
    width: 100%;
    margin-bottom: 20px;
    tr{
        border-top: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
    }
    th, td{
        padding: 8px;
        text-align: center;
    }
    th{
        font-weight: bold;
    }
}
.table-bordered{
    tr{
        border: none;
    }
    th, td{
        border: 1px solid $border-color;
    }
}
.table-striped{
    tr:nth-child(odd){
        background-color: inherit;
    }
}


/*-------- panel --------*/
.panel{
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #fff;
}
.panel-body, .panel-foot{
    padding: 15px 20px;
}
.panel-head{
    padding: 10px 20px;
}
.panel-body{

}
.panel-foot{

}
.panel-default{
    border: 1px solid $border-color;
}
.panel-theme{
    border: 1px solid $border-color;
    .panel-head{
        border-bottom: 1px dashed $border-color;
    }
}


/*-------- 情景文本颜色 --------*/
.text-muted {
    color: #777;
}
.text-primary {
    color: #4390EE;
}
.text-success {
    color: #3c763d;
}
.text-info {
    color: #31708f;
}
.text-warning {
    color: #8a6d3b;
}
.text-danger {
    color: #a94442;
}


/*-------- 灰度文本颜色 --------*/
.text-gray{
    color: #555;
}
.text-gray-light{
    color: #777;
}
.text-gray-lighter{
    color: #999;
}
.text-white{
    color: #fff;
}


/*-------- 情景按钮颜色 --------*/
.btn-default{
    color: $text-primary;
    border-color: $border-color;
    background-color: $bg-primary;
}
.btn-theme{
    color: #fff;
    background-color: #4390EE;
}
.btn-primary{
    color: #fff;
    background-color: #4390EE;
}
.btn-success{
    color: #fff;
    background-color: #5cb85c;
}
.btn-info{
    color: #fff;
    background-color: #5bc0de;
}
.btn-warning{
    color: #fff;
    background-color: $btn-warning-color;
}
.btn-danger{
    color: #fff;
    background-color: #d9534f;
}
.btn-border{
    color: $color-primary;
    border: 1px solid $color-primary;
}
.btn-radius{
    border-radius: 5px;
}
.btn-border.btn-warning{
    color: #E34A07;
    border-color: currentColor;
    background-color: transparent;
}
.btn-border.btn-primary{
    color: #0067D1;
    border-color: currentColor;
    background-color: transparent;
}


/*-------- 情景背景颜色 --------*/
.bg-primary{
    color: #fff;
    background-color: #4390EE;
}
.bg-success {
    background-color: #dff0d8;
}
.bg-info {
    background-color: #d9edf7;
}
.bg-warning {
    background-color: #fcf8e3;
}
.bg-danger {
    background-color: #f2dede;
}


/*-------- 辅助 --------*/
.section-sm{
    margin-bottom: 10px;
}
.section{
    margin-bottom: 20px;
}
.section-lg{
    margin-bottom: 30px;
}
.section-lgr{
    margin-bottom: 40px;
}